<!--人物竖版卡片样式1-->
<template>
  <section class="vertical-card-one" :style="{ 'margin-top': top, 'padding': `0 ${spacing}`}">
    <cell-title
        v-if="option.isShowModuleName"
        :title="moduleName"
        :hide-desc="!option.showMore"
        :style="{
        'background-color': option.backgroundColor,
        'border-radius':
          px2rem(option.radiusSize) + ' ' + px2rem(option.radiusSize) + ' 0 0',
          'padding': `0 ${spacing}`
      }"
    />
    <section class="card1-container">
      <section v-for="(item,index) in list" :key="index" class="card1-item">
        <section class="img-box" :style="{height: imgHeight}">
          <van-image :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :fit="imgType">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/default-placeholder.png" alt="">
            </template>
          </van-image>
        </section>
        <section class="card1-title etc">
          {{ isInitData ? getMapping(item,'title') : item.name }}
        </section>
        <section v-if="showSubTilte" class="card1-des etc3">
          {{ isInitData ? getMapping(item,'subTitle') : item.otherInfo }}
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
import CellTitle from './cellTitle'

export default {
  name: 'VerticalCardOne',
  components: { CellTitle },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [
        {
          name: '张三',
          coverVerticalURL: '',
          id: '1',
          otherInfo: '高级技师',
          activityTypeName: '专项答题',
          activityType: 'HDLX_ZXDT',
          positionalTitles: '这里是简介',
          introduce: '这里文字'
        },
        {
          name: '张三',
          coverVerticalURL: '',
          id: '1',
          otherInfo: '高级技师',
          activityTypeName: '专项答题',
          activityType: 'HDLX_ZXDT',
          positionalTitles: '这里是简介',
          introduce: '这里文字'
        },
        {
          name: '张三',
          coverVerticalURL: '',
          id: '1',
          otherInfo: '高级技师',
          activityTypeName: '专项答题',
          activityType: 'HDLX_ZXDT',
          positionalTitles: '这里是简介',
          introduce: '这里文字'
        }
      ],
      pageSize: 0
    }
  },
  computed: {
    // 图片高度
    imgHeight() {
      return this.px2rem(this.option.imgHeight || 378)
    },
    // 是否展示副标题
    showSubTilte() {
      return this.option.showSubTilte
    },
    moduleName() {
      if (this.option.moduleName.startsWith('${')) {
        return this.isInitData ? this.varInfo[this.option.moduleName] : this.pageVar().length>0 ? this.pageVar().find(item => { return item.code === this.option.moduleName })?.value : ''
      } else {
        return this.option.moduleName || ''
      }
    },
  },
  async created() {
    if (this.isInitData) {
      this.pageSize = this.option.number
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result.dataList.data.rows
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';
  .vertical-card-one {
    position: relative;
    width: rem(750);
    padding: rem(12) 0;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .card1-container{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      border-radius: rem(16);
      background-color: #fff;
      padding: rem(24);
      padding-bottom: 0;
      .card1-item{
        margin-bottom: rem(30);
        .img-box{
          width: rem(316);
          height: rem(378);
          .van-image{
            width: 100%;
            height: 100%;

          .van-image__img{
            border-radius: rem(16);
          }
          .van-image__error{

            border-radius: rem(16);
          }
            .van-image__error{
              > img {
                width: rem(120);
                height: rem(120);
              }
            }
          }
        }
        .card1-title{
          width: rem(316);
          margin-top: rem(27);
          font-size: rem(28);
          font-weight: bold;
          text-align: left;
          color: #333;
        }
        .card1-des{
          width: rem(316);
          margin-top: rem(16);
          font-size: rem(24);
          text-align: left;
          color: #999;
        }
      }
    }
  }

</style>
